<template>
  <div class="content">
    <div class="allmap" ref="allmap"></div>
    <div class="tab">
      <div
        class="arrow"
        @click="handleArrowClick"
      >V
      </div>
      <navbar v-model="selected">
        <tab-item id="1">酒店</tab-item>
        <tab-item id="2">景点</tab-item>
      </navbar>

      <!-- tab-container -->
      <tab-container v-model="selected">
        <tab-container-item id="1">
          <cell
            v-for="item of addressList[0]"
            :title="item.title"
            :label="item.label"
            :key="item.id"
            @click.native="handleCellClick(item.id)"/><!--在插件上添加事件@click.native-->
        </tab-container-item>
        <tab-container-item id="2">
          <cell
            v-for="item of addressList[1]"
            :title="item.title"
            :label="item.label"
            :key="item.id"
            @click.native="handleCellClick(item.id)"/>
        </tab-container-item>
      </tab-container>
    </div>
  </div>

</template>

<script>
  import {
    Navbar,
    TabItem,
    TabContainer,
    TabContainerItem,
    Cell
  } from 'mint-ui';
  import markerImg from '../../../assets/images/marker.png'

  export default {
    name: "mapContent",
    data() {
      return {
        selected: '1',
        addressList: [
          [
            {
              id: '1',
              label: "北京大栅栏",
              title: "北京大栅栏"
            },
            {
              id: '2',
              label: "北京天安门",
              title: "北京天安门"
            }
          ],
          [
            {
              id: '1',
              label: "北京颐和园",
              title: "北京颐和园"
            },
            {
              id: '2',
              label: "北京圆明园",
              title: "北京圆明园"
            }
          ]
        ],
        flag: '1',
        clickFlag: '0'
      }
    },
    components: {
      Navbar,
      TabItem,
      TabContainer,
      TabContainerItem,
      Cell
    },
    watch: {
      //判断navbar点击的是左边还是右边
      selected(val) {
        if (val === '1') {
          this.flag = '1';
        } else {
          this.flag = '2';
        }
      }
    },
    methods: {
      handleArrowClick() {
        //判断是否点击
        if (this.clickFlag === '0') {
          this.$refs.allmap.style.height = '20%';
          this.clickFlag = '1';
        } else {
          this.$refs.allmap.style.height = '60%';
          this.clickFlag = '0';
        }
      },
      addMasker(m, n) {
        let map = new BMap.Map(this.$refs.allmap);
        let myGeo = new BMap.Geocoder();
        for (let i = 0; i < this.addressList.length; i++) {
          for (let j = 0; j < this.addressList[i].length; j++) {
            let title = this.addressList[m][n].title;
            myGeo.getPoint(this.addressList[i][j].title, function (point) {
              // console.log(point);
              if (point) {
                if (i === m && j === n) {
                  map.centerAndZoom(point, 15);
                  let myIcon = new BMap.Icon(
                    markerImg,
                    new BMap.Size(80, 80),
                    {imageOffset: new BMap.Size(25, 22)}
                  );
                  let marker = new BMap.Marker(point, {icon: myIcon});
                  map.addOverlay(marker);
                  //添加信息窗口
                  let infoWindow = new BMap.InfoWindow(title);
                  infoWindow.setWidth(250);
                  infoWindow.setHeight(60);
                  map.openInfoWindow(infoWindow, map.getCenter());
                } else {
                  map.centerAndZoom(point, 15);
                  let marker = new BMap.Marker(point);
                  map.addOverlay(marker);
                }
              } else {
                console.log('对不起，找不到');
              }
            });
          }
        }
      },
      handleCellClick(id) {
        if (this.flag === '1') {
          this.changeMasker(id);
        } else {
          this.changeMasker(id);
        }
      },
      changeMasker(id) {
        let page = parseInt(this.flag) - 1;
        let index = parseInt(id) - 1;
        this.addMasker(page, index);
      }
    },
    mounted() {
      this.addMasker(0, 0);
    }
  }
</script>

<style lang="stylus" scoped>
  .content
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #fff
    z-index: 100

  .allmap
    position: relative
    top: 0
    left: 0
    right: 0
    bottom: .6rem
    z-index: 11111
    height: 60%
    transition: height 2s;

  .tab
    color: #000

  .arrow
    text-align: center
    padding: .5rem

</style>
